<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1 -->
    <!-- class动态绑定 -->
    <div v-bind:class="{active:isActive}"></div>
    data:{
    isActive:true
    }
    <div v-bind:class="[activeClass]"></div>
    data:{
    activeClass: "active"
    }

    <!-- style动态绑定 -->
    <div v-bind:style={color: activeColor}></div>
    data:{
    activeColor: "red"
    }
    <div v-bind:style=[styleColor]></div>
    data:{
    styleColor:{
    color:"red"
    }
    }


    <script>
        // 2
        // (1)computed支持缓存，只有依赖项发生改变才会重新计算
        //watch不支持缓存，数据变就会触发
        //（2）computed不支持异步， watch支持异步
        // (3)computed中的函数必须要用return返回，
        // watch中的函数不是必须要用return。
        // computed---当一个属性受多个属性影响的时候，使用computed--购物车商品结算。
        // watch–当一条数据影响多条数据的时候，使用watch-----搜索框.


        // 3
        // created，beforeMount,mounted中都可以发送数据请求,但是一般在created中进行异步请求，
        // 这样可以快速获取服务端的数据，减少页面加载的时间
        // ssr不支持beforeMount,mounted钩子函数


        // 4.
        // mounted
        // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。延时定时器

        // 
    </script>

    <!-- 基本 -->
    <keep-alive include="组件名">
        <component :is="view"></component>
    </keep-alive>
    <script>
        // 用于缓存组件，一般结合路由和动态组件一起使用
        // //  Props：
        // include：只有名称匹配的组件会被缓存。
        // exclude：任何名称匹配的组件都不会被缓存。
        // max - 数字。 最多可以缓存多少组件实例。

        // 当组件在 <keep-alive> 内被切换，
        // 它的 activated(激活触发) 和 deactivated(失活触发)
        // 这两个生命周期钩子函数将会被对应执行。
    </script>

</body>

</html>